<template>
  <!-- 新闻公告 -->
  <div class="newsNotice">
    <el-row :gutter="20"
            style="margin-top:20px">
      <el-form label-width="80px">
        <el-col :span="8">
          <el-form-item label="消息标题">
            <el-input v-model="requestparam.title"
                      placeholder="请输入消息标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人">
            <el-select v-model="requestparam.created_user_id"
                       placeholder="请选择创建人">
              <el-option v-for="option in createPeople"
                         :key="option.created_user_id"
                         :value="option.created_user_id"
                         :label="option.created_user_name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通知时间">
            <el-date-picker v-model="timeVal"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24"
                class="flex-end">
          <el-button type="primary"
                     @click="addNews">新增</el-button>
          <el-button type="primary"
                     @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-table :highlight-current-row="true"
              class="tableNav"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="newsList.list">
      <el-table-column type="index"
                       label="序号"
                       sortable
                       align="center"
                       width="80"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="title"
                       label="新闻标题"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="content"
                       label="正文"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="创建人"
                       prop="created_user_name"
                       align="center">
      </el-table-column>
      <el-table-column label="创建时间"
                       prop="created_at"
                       align="center">
      </el-table-column>
      <el-table-column label="操作"
                       prop="score"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="detail(scope.row)">详情</el-button>
          <el-button type="text"
                     @click="editNews(scope.row)">编辑</el-button>
          <el-button type="text"
                     @click="deleteNews(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="requestparam.page"
                   :page-size="requestparam.page_size"
                   :page-sizes="[10, 20, 30, 40]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="newsList.total_count">
    </el-pagination>
    <el-dialog :title="todos==1?'新增新闻':'编辑新闻'"
               :visible.sync="dialogAddVisible"
               width="55%"
               :before-close="handleClose"
               :modal-append-to-body="true"
               :close-on-click-modal="false"
               :append-to-body="true">
      <AddModifyNewDialog :todos="todos"
                          v-if="dialogAddVisible"
                          :catchBack="catchBack"
                          :catchSave="catchSave"
                          :objRow="objRow">
      </AddModifyNewDialog>
    </el-dialog>
  </div>
</template>

<script>
import { CulManagePartyBuildApi } from "@/services/WorkCenter";
import { UploadFileApi } from '@/services/UserPermission';
import { MessageCenterApi } from '@/services/ProjectCenter';
import AddModifyNewDialog from './components/addModifyNewDialog'

export default {
  components: {
    AddModifyNewDialog
  },
  data () {
    return {
      timeVal: '', //通知时间
      objRow: '',
      todos: 0,
      newsForm: {
        credit_img: '',

      },
      dialogAddVisible: false,
      requestparam: {
        title: '',
        created_user_id: '',
        start_time: '',
        end_time: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        title: '',
        created_user_id: '',
        start_time: '',
        end_time: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      createPeople: [], //创建人
      newsList: {
        list: [{
          exercise_name: '',
        }],
        total: 0,
        total_count: 0,
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  created () {
    this.getCreates()
    this.search()
  },
  mounted () { },
  methods: {
    //创建人列表
    getCreates () {
      MessageCenterApi.createPeopleList({
        params: this.requestparam
      }).then(res => {
        if (res.code === 0) {
          this.createPeople = res.data.list
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    // 上传
    uploadBusinessImg (params) {
      let formData = new FormData()
      formData.append('module', 'business-img')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.newsForm.credit_img = res.data.file_path;
        }
      })
    },
    /*移除HTML标签代码*/
    removeHTMLTag (str) {
      str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
      str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
      //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
      str = str.replace(/ /ig, '');//去掉 
      return str;
    },
    //转意符换成普通字符
    escape2Html (str) {
      var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
    },
    //查询
    search () {
      if (this.timeVal) {
        this.requestparam.start_time = this.timeVal[0]
        this.requestparam.end_time = this.timeVal[1]
      }

      MessageCenterApi.getList({
        params: this.requestparam
      }).then(res => {
        if (res.code === 0) {
          this.newsList = res.data
          this.newsList.list.map(item => {
            let list = this.removeHTMLTag(item.content)
            item.content = this.escape2Html(list)
          })
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    //分页
    handleSizeChange (val) {
      this.requestparam.page_size = val
      this.search()
    },
    handleCurrentChange (val) {
      this.requestparam.page = val
      this.search()
    },
    //重置
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestparam = Object.assign(this.requestparam, reset)
      this.timeVal = ''
      this.search()
    },
    //详情
    detail (row) {
      this.todos = 3; //详情
      this.objRow = JSON.stringify(row)
      this.dialogAddVisible = true
    },
    //保存时触发的事件
    catchSave () {
      this.catchBack()
      this.handleCurrentChange(1)
    },
    catchBack () {//返回时触发的事件
      this.todos = 0;
      this.objRow = '';
      this.dialogAddVisible = false;
    },
    //弹框关闭时触发的事件
    handleClose (done) {
      this.todos = 0;
      this.objRow = '';
      done();
    },
    //新增新闻
    addNews () {
      this.todos = 1;
      this.dialogAddVisible = true;
    },
    //编辑
    editNews (row) {
      this.todos = 2;
      this.objRow = JSON.stringify(row)
      this.dialogAddVisible = true;
    },
    //删除
    deleteNews (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        MessageCenterApi.deteleNewsList({
          data: {
            news_id: row.news_id
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success('删除成功');
            this.search()
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {

      });
    },

  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.newsNotice {
  padding: 20px;
  .el-table {
    margin-top: 20px;
  }
  .el-date-editor,
  .el-select {
    width: 100%;
  }
}
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
